<template>
<h2>事件demo08-event01</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">监听事件v-on或@</div>
    <div  class="zhtt-demo-card-body">
      <p>
        randomResult：{{randomResult}}
      </p>
      <button class="zhtt-btn" v-on:click="random">v-on:click="random"</button>
      <button class="zhtt-btn" v-on:click="random()">v-on:click="random()"</button>
      <button class="zhtt-btn" @click="random">@click="random"</button>
      <button class="zhtt-btn" @click="random()">@click="random()"</button>
    </div>
    <div class="zhtt-demo-card-footer">
      v-on:click="random"<br/>
      @click="random"
    </div>
  </div>
  <div class="zhtt-demo-card" @click="accessDom($event)">
    <div class="zhtt-demo-card-header">访问原始DOM</div>
    <div  class="zhtt-demo-card-body">
      domHtml：<p v-html="domHtml"></p>，<b style="color:red;">点我试试</b>
    </div>
    <div class="zhtt-demo-card-footer">
      accessDom($event)
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">事件修饰符</div>
    <div  class="zhtt-demo-card-body">
      .stop：阻止事件冒泡<br/>
      .prevent：<br/>
      .capture：添加事件监听器时使用事件捕获模式， 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理。<br/>
      .self：只当在 event.target 是当前元素自身时触发处理函数。即事件不是从内部元素触发的<br/>
      .once：点击事件将只会触发一次<br/>
      .passive：<br/>
    </div>
    <div class="zhtt-demo-card-footer">
      &lt;!-- 修饰符可以串联 --&gt;<br/>
      &lt;a @click.stop.prevent="doThat"&gt;&lt;/a&gt;
    </div>
  </div>
</template>

<script>
export default {
  name: "demo08-event01",
  data(){
    return {
      randomResult:null,
      domHtml:null
    }
  },
  methods:{
    random(){
      this.randomResult = Math.random();
    },
    accessDom(event){
      this.domHtml = event.target.innerHTML;
      console.log(event);
    }
  }
}
</script>

<style scoped>

</style>